package com.fanketly.funacg2.ui.screen

import androidx.activity.compose.BackHandler
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.constraintlayout.compose.Dimension
import com.fanketly.funacg2.R
import com.fanketly.funacg2.ui.components.CommonTextField
import com.fanketly.funacg2.ui.components.MyAppBar
import com.fanketly.funacg2.ui.screen.destinations.HomeDestination
import com.fanketly.funacg2.ui.screen.destinations.SignUpDestination
import com.fanketly.funacg2.ui.viewmodels.HomeViewModel
import com.ramcosta.composedestinations.annotation.Destination
import com.ramcosta.composedestinations.navigation.DestinationsNavigator
import com.ramcosta.composedestinations.navigation.popUpTo


@Destination
@Composable
fun LoginScreen(
    navigator: DestinationsNavigator,
    homeViewModel: HomeViewModel,
) {
    BackHandler {
        navigator.popBackStack()
        navigator.navigate(HomeDestination) {
            popUpTo(NavGraphs.root) {
                saveState = true
            }
            launchSingleTop = true
            restoreState = true
        }
    }
    Login(
        onBackClick = {
            navigator.popBackStack()
            navigator.navigate(HomeDestination) {
                popUpTo(NavGraphs.root) {
                    saveState = true
                }
                launchSingleTop = true
                restoreState = true
            }
        },
        onLoginClick = { username, password ->
            homeViewModel.login(
                username,
                password
            ) {
                navigator.popBackStack()
                navigator.navigate(HomeDestination) {
                    popUpTo(NavGraphs.root) {
                        saveState = true
                    }
                    launchSingleTop = true
                    restoreState = true
                }
            }
        }) {
        navigator.navigate(SignUpDestination)
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Login(
    onBackClick: () -> Unit,
    onLoginClick: (String, String) -> Unit,
    onNavigation: () -> Unit,
) {
    val context = LocalContext.current
    val usernameValue = remember {
        mutableStateOf("")
    }
    val passwordValue = remember {
        mutableStateOf("")
    }
    ConstraintLayout(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth(),
    ) {
        val (bar, username, password, not_account, sign_up, btn) = createRefs()
        MyAppBar(
            modifier = Modifier.constrainAs(bar) {},
            title = stringResource(id = R.string.title_login),
            onClick = onBackClick
        )
        CommonTextField(textValue = usernameValue, modifier = Modifier.constrainAs(username) {
            top.linkTo(bar.bottom, 40.dp)
            start.linkTo(parent.start)
            end.linkTo(parent.end)
        }, label = { Text(text = stringResource(id = R.string.username)) })
        CommonTextField(textValue = passwordValue,
            keyboardType = KeyboardType.Password,
            modifier = Modifier.constrainAs(password) {
                top.linkTo(username.bottom, 14.dp)
                start.linkTo(username.start)
                end.linkTo(username.end)
            },
            label = { Text(text = stringResource(id = R.string.password)) })
        Button(onClick = {
            if (usernameValue.value.isEmpty() || passwordValue.value.isEmpty()) return@Button
            onLoginClick(usernameValue.value, passwordValue.value)
        }, shape = MaterialTheme.shapes.medium,
//                colors = ButtonDefaults.buttonColors(),
            modifier = Modifier
                .height(55.dp)
                .constrainAs(btn) {
                    width = Dimension.fillToConstraints
                    top.linkTo(password.bottom, 14.dp)
                    start.linkTo(password.start)
                    end.linkTo(password.end)
                }) {
            Text(
                text = stringResource(id = R.string.title_login), fontSize = 20.sp
            )
        }
        //注册
        Text(text = stringResource(id = R.string.not_have_account),
            modifier = Modifier.constrainAs(not_account) {
                width = Dimension.wrapContent
                top.linkTo(btn.bottom, 36.dp)
                end.linkTo(sign_up.start, 4.dp)
            })
        Text(text = stringResource(id = R.string.title_register),
            color = MaterialTheme.colorScheme.primary,
            modifier = Modifier
                .constrainAs(sign_up) {
                    width = Dimension.wrapContent
                    top.linkTo(not_account.top)
                    bottom.linkTo(not_account.bottom)
                    end.linkTo(btn.end, 4.dp)
                }
                .clickable(onClick = onNavigation))
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Destination
@Composable
fun SignUp(
    navigator: DestinationsNavigator,
    homeViewModel: HomeViewModel,
) {
    val usernameValue = remember {
        mutableStateOf("")
    }
    val passwordValue = remember {
        mutableStateOf("")
    }
    ConstraintLayout(
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth(),
    ) {
        val (bar, username, password, btn) = createRefs()
        MyAppBar(
            modifier = Modifier.constrainAs(bar) {},
            title = stringResource(id = R.string.title_register)
        ) {
            navigator.popBackStack()
        }

        CommonTextField(textValue = usernameValue,
            modifier = Modifier.constrainAs(username) {
                top.linkTo(bar.bottom, 40.dp)
                start.linkTo(bar.start)
                end.linkTo(bar.end)
            }, label = { Text(text = stringResource(id = R.string.username)) })

        CommonTextField(textValue = passwordValue,
            keyboardType = KeyboardType.Password,
            modifier = Modifier.constrainAs(password) {
                top.linkTo(username.bottom, 14.dp)
                start.linkTo(username.start)
                end.linkTo(username.end)
            }, label = { Text(text = stringResource(id = R.string.choose_password)) })

        Button(onClick = {
            if (usernameValue.value.isEmpty() || passwordValue.value.isEmpty()) return@Button
            homeViewModel.register(usernameValue.value, passwordValue.value) {
                navigator.popBackStack()
            }
        },
            shape = MaterialTheme.shapes.medium,
//                colors = ButtonDefaults.buttonColors(),
            modifier = Modifier
                .height(55.dp)
                .constrainAs(btn) {
                    width = Dimension.fillToConstraints
                    top.linkTo(password.bottom, 14.dp)
                    start.linkTo(password.start)
                    end.linkTo(password.end)
                }) {
            Text(
                text = stringResource(id = R.string.title_register), fontSize = 20.sp
            )
        }
    }
}

